import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { Card, Title, Paragraph, Switch, List, Divider } from 'react-native-paper';

export function SettingsScreen() {
  const [notifications, setNotifications] = React.useState(true);
  const [darkMode, setDarkMode] = React.useState(false);
  const [autoSave, setAutoSave] = React.useState(true);

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
        <Card style={styles.card}>
          <Card.Content>
            <Title>Settings</Title>
            <Paragraph>Customize your manga colorizer experience</Paragraph>
          </Card.Content>
        </Card>

        <Card style={styles.card}>
          <Card.Title title="Preferences" />
          <Card.Content>
            <List.Item
              title="Push Notifications"
              description="Receive notifications when processing completes"
              right={() => (
                <Switch value={notifications} onValueChange={setNotifications} />
              )}
            />
            <Divider />
            <List.Item
              title="Dark Mode"
              description="Use dark theme throughout the app"
              right={() => <Switch value={darkMode} onValueChange={setDarkMode} />}
            />
            <Divider />
            <List.Item
              title="Auto-save Results"
              description="Automatically save colored images to device"
              right={() => <Switch value={autoSave} onValueChange={setAutoSave} />}
            />
          </Card.Content>
        </Card>

        <Card style={styles.card}>
          <Card.Title title="About" />
          <Card.Content>
            <List.Item
              title="Version"
              description="1.0.0"
            />
            <Divider />
            <List.Item
              title="AI Model"
              description="Stable Diffusion + ControlNet"
            />
            <Divider />
            <List.Item
              title="Support"
              description="Contact support@mangacolorizer.com"
            />
          </Card.Content>
        </Card>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 16,
  },
  card: {
    marginBottom: 16,
  },
});
